<template>
	<view class="container">
		<!-- F1: 顶部搜索栏 -->
		<view class="f1">
			<!-- 左侧：汉堡包按钮 -->
			<uni-icons @click="$refs.drawerMenu.open()" type="bars" color="#fff" size="60rpx"/>
			<!-- 中间：输入框组 -->
			<view class="input-group">
				<input disabled @click="goToSearch" type="text" placeholder="商品搜索"/>
				<image src="../../static/img/logo-s.png" mode="widthFix"/>
				<uni-icons class="search" type="search" size="45rpx" color="#666"/>
			</view>
			<!-- 右侧：登录按钮 -->
			<navigator url="/pages/userCenter/userCenter" open-type="switchTab">登录</navigator>
		</view>
		<!-- F2: 轮播广告 -->
		<!-- indicator-dots：是否显示圆饼指示器 -->
		<!-- autoplay：是否自动轮播 -->
		<!-- interval：两个轮播广告项之间停留的时间间隔 -->
		<!-- duration：一个广告切换动画持续时长 -->
		<!-- circular：是否循环播放 -->
		<swiper indicator-dots autoplay circular :interval="3000" :duration="1000">
			<swiper-item v-for="(c, i) in carouselItems" :key="i">
				<view class="swiper-item">
					<image :src="base+c.img" mode="widthFix" style="width:100%"/>
				</view>
			</swiper-item>
		</swiper>
		<!-- F3: 首页推荐 -->
		<xzProductCard  title="首页推荐 / 1F"  :data="recommendedItems"/>
		<!-- F4: 最新上架 -->
		<xzProductCard  title="最新上架 / 2F"  :data="newArrivalItems"/>
		<!-- F5: 热销单品 -->
		<xzProductCard  title="热销单品 / 3F"  :data="topSaleItems"/>
		<!-- F6: 页尾 -->
		<xzFooter></xzFooter>
		<!-- F7: 返回顶部 -->
		<xzGoTop></xzGoTop>
		<!-- F8: 汉堡包按钮弹出的抽屉(菜单) -->
		<uni-drawer ref="drawerMenu">
			<view style="padding:30rpx;">
				<!-- link：①指定跳转方式 ②添加向右的箭头 ③增加点击反馈(背景色变深) -->
				<uni-list>
					<uni-list-item title="登录" link="switchTab" to="/pages/userCenter/userCenter"/>
					<uni-list-item title="注册" link="switchTab" to="/pages/userCenter/userCenter"/>
					<uni-list-item title="品牌馆" link="switchTab" to="/pages/brands/brands"/>
					<uni-list-item title="商品分类" link="switchTab" to="/pages/category/category"/>
					<uni-list-item title="商品搜索" link to="/pages/search/search"/>
					<uni-list-item title="在线客服" link to="/pages/chatroom/chatroom"/>
				</uni-list>
				<button @click="$refs.drawerMenu.close()" type="primary" size="mini">关闭</button>
			</view>
		</uni-drawer>
	</view>
</template>							

<script>
	import { productIndex, base } from '@/service'
	export default {
		data(){
			return {
				base,	//把导入的局部变量base设置为当前Vue示例的data属性
				carouselItems: [],			//轮播广告条目
				newArrivalItems: [],		//新品上市条目
				recommendedItems: [],		//首页推荐条目
				topSaleItems:[],			//热销单品条目
			}
		},
		async onLoad(){
			console.log('------首页挂载完成-------')
			//发起服务器端异步请求，获取首页必需的数据
			let data = await productIndex()
			// console.log(data)
			this.carouselItems = data.carouselItems		//为“轮播广告”列表赋值
			this.newArrivalItems = data.newArrivalItems	//为“新品上市”列表赋值
			this.recommendedItems = data.recommendedItems	//为“首页推荐”列表赋值
			this.topSaleItems = data.topSaleItems		//为“热销单品”列表赋值
		},
		methods: {
			goToSearch(){
				//导航跳转/保留跳转到搜索页
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	//渐变的背景色 —— 不是背景色而是背景图片
	background-image: linear-gradient(180deg, $uni-color-primary 100rpx,  $uni-bg-color 500rpx);
}
.f1 {
	padding-top: $uni-spacing-col-lg * 3;
	padding-bottom: $uni-spacing-col-base;
	padding-left: $uni-spacing-row-lg;
	padding-right: $uni-spacing-row-lg;
	//弹性容器主轴方向：横向
	flex-direction: row;
	//子元素在交叉轴上对齐方式：居中
	align-items: center;
	.input-group {
		//弹性子元素宽度增长权重：1
		flex: 1;
		margin: 0  $uni-spacing-row-base;
		position: relative; //为图标提供定位参照物
		input {
			background-color: $uni-text-color-inverse;
			//line-height: 100rpx  !important;  //此处无效
			height: $uni-font-size-base * 2.4;
			border-radius: $uni-font-size-base * 1.2;
			text-align: center;
		}
		image {
			width: $uni-font-size-base * 1.4;
			position: absolute;
			left: $uni-spacing-row-lg;
			top: 50%;	//此处的50%指父元素高度的一半
			transform: translateY(-50%);  //此处的50%指自身高度的一半
		}
		.search {
			position: absolute;
			right: $uni-spacing-row-lg;
			top: 50%;
			transform: translateY(-50%);  //此处的50%指自身高度的一半
		}
	}
	navigator {
		color: $uni-text-color-inverse;
	}
}
</style>